<template>
	<view :style="'height:'+Height+'rpx; width: '+width+'rpx; '"
	class="list">
		<view class="item-top">
			<image :src="list.icon" mode=""></image>
			<text>{{list.name}}</text>
		</view>
		<view :class=" width===344 ? '.item-bon':'.item-bons'" :style="'background-color:'+list.color+';'">
			<image :class=" width===344 ? '.item-image':'.item-images'" :src="list.image" mode=""></image>
		 <text class="item-text1">{{list.text1}}</text>
		 <text class="item-text2">{{list.text2}}</text>
		 <view class="item-but">
		 	{{list.but}}
		 </view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"index-list",
		props:{
		Height: {
      type: Number,
      default: 300
       },
		width: {
      type: Number,
      default: 344
       },
	   list:{
		  type:Object,
		  default:{}
	   }
		},
		data() {
			return {
				
			};
		},
		computed:{
			num(){
				return this.width - 34
			}
		},
		
	}
</script>

<style lang="less" scoped> 
.list{
	background-color: #fff;
	border-radius: 15rpx;
}
.item-top{
	height: 80rpx;
	display: flex;
	align-items: center;
	image{
		width: 50rpx;
		height: 50rpx;
		padding-left: 15rpx;
	}
	text{
		padding-left: 15rpx;
	}
}
.item-bon{
	position: relative;
	width: 316rpx;
	height: 200rpx;
	margin: 0 auto;
	background-color: #1bcf91;
	border-radius: 10rpx;
}
.item-bons{
	position: relative;
	width: 676rpx;
	height: 210rpx;
	margin: 0 auto;
	background-color: #1bcf91;
	border-radius: 10rpx;
}
.item-image{
	position: absolute;
	right: 4rpx;
	bottom: 3rpx;
	width: 150rpx;
	height: 120rpx;
}
.item-images{
	position: absolute;
	right: 10rpx;
	bottom: 10rpx;
	width: 180rpx;
	height: 180rpx;
}
.item-text1{
	color: #fff;
	padding: 20rpx;
	font-size: 24rpx
}
.item-text2{
	display: block;
	padding: 10rpx 10rpx  0rpx 20rpx;
	font-size: 28rpx;
	color: #fff;
}
.item-but{
	position: absolute;
	bottom: 20rpx;
	left: 20rpx;
	border-radius: 10rpx;
	background-color: #fff;
	color: #1bcf91;
	padding: 6rpx 14rpx 6rpx 14rpx;
	font-size: 26rpx;
}
</style>